<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Minimalist Image Editor</title>
    <style>
        body {
            margin: 0;
            padding: 0;
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            background-color: #f0f0f0;
            font-family: Arial, sans-serif;
        }

        #canvasContainer {
            width: 90%;
            height: 90%;
            border: 1px solid #ccc;
            position: relative;
        }

        #_canvas {
            border: 1px solid #ccc;
            width: 100%;
            height: 100%;
        }

        .floating-panel {
            position: absolute;
            top: 20px;
            left: 20px;
            background-color: #fff;
            border: 1px solid #ccc;
            padding: 10px;
            box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
            border-radius: 4px;
        }

        .data-panel {
            left: 800px;
        }

        #functionPanel {
            height: 500px;

        }

        .floating-panel .title {
            margin: 0;
            padding: 5px;
            background-color: #eee;
            cursor: move;
            margin-bottom: 2px;
            text-align: center;
        }

        .buttons {
            display: flex;
            flex-direction: column;
            gap: 5px;
            overflow: auto;
            height: 478px;
        }

        .buttons button {
            padding: 5px 10px;
            cursor: pointer;
        }

        table {
            margin-top: 20px;
            border: 1px solid rgb(51, 50, 50);
            border-collapse: collapse;
            width: 100%;
        }

        th,
        td {
            border: 1px solid rgb(45, 44, 44);
            padding: 8px;
            text-align: left;
        }

        th {
            background-color: lightblue;
        }
    </style>
</head>

<body>
    <div id="canvasContainer">
        <canvas id="_canvas"></canvas>
    </div>

    <div class="floating-panel function-panel" id="functionPanel">
        <p class="title">功能按钮</p>
        <div class="buttons">
            <button type="button" onclick="boom()">boom</button>
            <button type="button" onclick="group()">group</button>
            <button type="button" onclick="collision()">collision</button>
            <button type="button" onclick="wallCollision()">wallCollision</button>
            <button type="button" onclick="polygonCollision()">polygonCollision</button>
            <button type="button" onclick="arrow()">arrow</button>
            <button type="button" onclick="moveToClick()">moveToClick</button>
            <button type="button" onclick="gravity()">gravity</button>
            <button type="button" onclick="mouseThrow()">mouseThrow</button>
            <button type="button" onclick="jump()">jump</button>
            <button type="button" onclick="shotGame()">shotGame</button>
            <button type="button" onclick="numberCountdown()">numberCountdown</button>
            <button type="button" onclick="HP()">HP</button>
            <button type="button" onclick="readtiled()">readtiled</button>
            <button type="button" onclick="animate()">animate</button>
            <button type="button" onclick="resourceLoading()">resourceLoading</button>
            <button type="button" onclick="drawReact()">drawReact</button>
            <button type="button" onclick="drawArc()">drawArc</button>
            <button type="button" onclick="drawArc2()">drawArc2</button>
            <button type="button" onclick="drawArrow()">drawArrow</button>
            <button type="button" onclick="drawingArrows()">drawingArrows</button>
        </div>
    </div>

    <div class="floating-panel data-panel " id="dataPanel" style="width: 400px;position: absolute;right: 410px;">
        <p class="title">数据表格</p>
        <table>
            <tr>
                <td>数据1</td>
                <td>值1</td>
            </tr>
            <tr>
                <td>数据2</td>
                <td>值2</td>
            </tr>
            <tr>
                <td>数据2</td>
                <td>值2</td>
            </tr>
            <tr>
                <td>数据2</td>
                <td>值2</td>
            </tr>
            <tr>
                <td>数据2</td>
                <td>值2</td>
            </tr>
        </table>
    </div>

    <script>
        // Enable dragging for floating panels
        function enableDrag(element) {
            let pos1 = 0, pos2 = 0, pos3 = 0, pos4 = 0;

            element.querySelector(".title").onmousedown = dragMouseDown;

            function dragMouseDown(e) {
                e = e || window.event;
                e.preventDefault();
                pos3 = e.clientX;
                pos4 = e.clientY;
                document.onmouseup = closeDragElement;
                document.onmousemove = elementDrag;
            }

            function elementDrag(e) {
                e = e || window.event;
                e.preventDefault();
                pos1 = pos3 - e.clientX;
                pos2 = pos4 - e.clientY;
                pos3 = e.clientX;
                pos4 = e.clientY;
                element.style.top = (element.offsetTop - pos2) + "px";
                element.style.left = (element.offsetLeft - pos1) + "px";
            }

            function closeDragElement() {
                document.onmouseup = null;
                document.onmousemove = null;
            }
        }

        enableDrag(document.getElementById("functionPanel"));
        enableDrag(document.getElementById("dataPanel"));


        // 监听画面变化，更新渲染画面
        window.addEventListener("resize", () => {
            let canvas = document.getElementById('_canvas');
            canvas.setAttribute("width", window.innerWidth);
            canvas.setAttribute("height", window.innerHeight);
        });

        function resizeCanvas() {
            const canvas = document.getElementById('_canvas');
            const container = document.getElementById('canvasContainer');
            canvas.width = container.clientWidth;
            canvas.height = container.clientHeight;
        }

        // 初始化画布尺寸
        resizeCanvas();

        // 在窗口调整大小时调整画布尺寸
        window.addEventListener('resize', resizeCanvas);

        const canvas = document.getElementById('_canvas');
        // const contextMenu = document.getElementById('contextMenu');
        canvas.addEventListener('contextmenu', function (event) {
            event.preventDefault();
            const x = event.clientX;
            const y = event.clientY;

            // contextMenu.style.left = `${x}px`;
            // contextMenu.style.top = `${y}px`;
            // contextMenu.style.display = 'block';
        });
    </script>


    <script type="text/javascript" src="engine.js"></script>
    <script type="text/javascript" src="examples/common.js"></script>
    <script type="text/javascript" src="examples/arrow.js"></script>
    <script type="text/javascript" src="examples/battle.js"></script>
    <script type="text/javascript" src="examples/collision.js"></script>
    <script type="text/javascript" src="examples/gravity.js"></script>
    <script type="text/javascript" src="examples/group.js"></script>
    <script type="text/javascript" src="examples/jump.js"></script>
    <script type="text/javascript" src="examples/mousethrow.js"></script>
    <script type="text/javascript" src="examples/move2click.js"></script>
    <script type="text/javascript" src="examples/polygoncollision.js"></script>
    <script type="text/javascript" src="examples/wallcollision.js"></script>
    <script type="text/javascript" src="examples/shot.js"></script>
    <script type="text/javascript" src="examples/timer.js"></script>
    <script type="text/javascript" src="examples/health.js"></script>
    <script type="text/javascript" src="tank/data/tank.js"></script>
    <script type="text/javascript" src="examples/tiledread.js"></script>
    <script type="text/javascript" src="examples/animate.js"></script>
    <script type="text/javascript" src="examples/resourceloading.js"></script>
    <script type="text/javascript" src="examples/mydrawing.js"></script>
</body>

</html>